<template>
<div>
  <a-table :columns="column" :data-source="rightsList">
    <template #headerCell="{ column }">
      <template v-if="column.key === 'authName'">
        <span>
          权限名称
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'authName'">
        <a>
          {{ record.authName }}
        </a>
      </template>
      <template v-else-if="column.key === 'menuPid'">
        <span>
          <a-tag :color="record.menuPid===0?'blue':'green'">
            {{ record.menuPid===0?'一级':'二级' }}
          </a-tag>
        </span>
      </template>
      <template v-else-if="column.key === 'action'">
        <span>
          <a>Invite 一 {{ record.name }}</a>
          <a-divider type="vertical" />
          <a>Delete</a>
          <a-divider type="vertical" />
          <a class="ant-dropdown-link">
            More actions
          </a>
        </span>
      </template>
    </template>
  </a-table>
</div>
</template>

<script>
import {onBeforeMount, ref} from "vue";
import {getAllRights} from "@/apis/menu";

export default {
  name: "Rights",
  setup() {

    const rightsList = ref([])

    const column = [{
      name: 'authName',
      dataIndex: 'authName',
      key: 'authName',
    },{
      title: '路径',
      dataIndex: 'path',
      key: 'path',
    },{
      title: '权限等级',
      key: 'menuPid',
      dataIndex: 'menuPid',
    },]

    onBeforeMount(()=>{
      getAllRights().then(res=>{
        rightsList.value = res.data
      })
    })

    return {
      column,
      rightsList
    }
  },
}
</script>

<style scoped>

</style>